/* 单元格拖拽功能还不成熟，代码封存 */
import React, { useRef } from 'react';
import { Resizable } from "re-resizable";
import { useDrag, useDrop } from 'react-dnd'
import getCssPrefix from '../../../lib/getCssPrefix';
import setResizeDirection from '../../../lib/setResizeDirection';
import itemTypes from '../lib/itemTypes';
const { cssPrefix } = getCssPrefix();
const directions = setResizeDirection({ right: true });
function HeaderCell(props) {
    const { width, changeWidth, colName, modifyColumns } = props;
    const ref = useRef(null)
    const onResize = (e, direction, ref, d) => {
        changeWidth(colName, ref.offsetWidth)
    }
    const [, drogRef] = useDrop({
        accept: itemTypes.HEADER_CELL,
        hover(item, monitor) {
            let dragId = item.id;
            let hoverId = colName;
            if (dragId === hoverId) {
                console.log('we are the same');
                return;
            }
            const hoverBoundingRect = ref.current?.getBoundingClientRect()
            let clientOffset = monitor.getClientOffset();
            let dragSpace = clientOffset.x - hoverBoundingRect.left;
            console.log(dragSpace);
            modifyColumns({ operate: 'switch', params: { fromId: dragId, toId: hoverId } });
        },

    })
    const [{ opacity }, dragRef] = useDrag(
        () => ({
            type: itemTypes.HEADER_CELL,
            item: { id: colName, width },
            collect: (monitor) => ({
                opacity: monitor.isDragging() ? 0.5 : 1,
            })
        }),
        []
    )
    dragRef(drogRef(ref));
    return (
        <Resizable enable={directions} onResize={onResize}>
            <div
                ref={ref}
                className={`${cssPrefix}-header-cell`}
                style={{ width: width, opacity }}
            >
                {props.children}
            </div>
        </Resizable>
    )
}
export default HeaderCell;